<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="http://web.sxl.show/sxl.ico" />
    <title>sxl</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #000;
            color: #eee;
            margin: 50px;
            overflow: hidden;
            white-space: pre;
        }

        .topZZ {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 50px;
            background: linear-gradient(to bottom, #000, transparent);
        }

        #warp {
            min-height: 50vh;
            font-family: Menlo, Monaco, 'Courier New', monospace;
            font-size: 13px;
            font-weight: 500;
            line-height: 20px;
            transition: all .5s;
            position: relative;
        }

        #warp>.zz {
            width: 100%;
            height: 20px;
            position: absolute;
            background-color: #000;
        }

        #warp>div {
            width: max-content;
            height: 20px;
        }

        .loadingWarp {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            opacity: 0;
            transition: opacity 0.3s;
            justify-content: center;
            align-items: center;
        }

        .loadingWarp.show {
            opacity: 1;
        }

        .loadEffect {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
        }

        .loadEffect span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            animation: load 1.04s ease infinite;
        }

        @keyframes load {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }

        .loadEffect span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -8px;
            animation-delay: 0.13s;
        }

        .loadEffect span:nth-child(2) {
            left: 14px;
            top: 14px;
            animation-delay: 0.26s;
        }

        .loadEffect span:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: -8px;
            animation-delay: 0.39s;
        }

        .loadEffect span:nth-child(4) {
            top: 14px;
            right: 14px;
            animation-delay: 0.52s;
        }

        .loadEffect span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -8px;
            animation-delay: 0.65s;
        }

        .loadEffect span:nth-child(6) {
            right: 14px;
            bottom: 14px;
            animation-delay: 0.78s;
        }

        .loadEffect span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            animation-delay: 0.91s;
        }

        .loadEffect span:nth-child(8) {
            bottom: 14px;
            left: 14px;
            animation-delay: 1.04s;
        }
    </style>
</head>

<body>
    <div id="warp"></div>
    <div class="topZZ"></div>
    <div class="loadingWarp">
        <div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script src="./js/axios.js"></script>
    <script>
        var warp = document.getElementById("warp");

        (async function () {
            let html = await axios.get('http://data.sxl.show/3d-album.txt');
            let json = await axios.get('http://data.sxl.show/3d-album.json');
            reInput(json.data, html.data)
        })()


        function reInput(json, str) {
            /* 循环渲染数据 */
            json.forEach((item, index) => {
                let span = document.createElement("span")
                item?.insert && (span.innerText = item.insert)
                item?.attributes?.color && (span.style.color = item.attributes.color)
                warp.appendChild(span)
            });

            /* 储存每一行的宽度 */
            let rowWidthList = [];
            [...warp.innerText].forEach((item, index) => {
                if (item == '\n') {
                    let ss = index - rowWidthList.reduce((perv, next) => perv + next, 0)
                    rowWidthList.push(ss)
                }
            })
            rowWidthList.push(warp.innerText.length - rowWidthList.reduce((perv, next) => perv + next, 0))

            /* 添加遮罩 */
            rowWidthList.forEach((item, index, arr) => {
                let zz = document.createElement("p")
                zz.className = "zz"
                zz.style = `top: ${20 * index}px; left: 0;`
                warp.appendChild(zz)
            })

            /* 动画 */
            let i = 0, zz = warp.querySelectorAll("p"), left = 0,
                timer = setInterval(async () => {
                    if (rowWidthList[i] * 8.1 <= left) {
                        left = 0;
                        if (i > document.documentElement.clientHeight * .6 / 20 && rowWidthList.length - i > (document.documentElement.clientHeight * .4 - 200) / 20) {
                            warp.style.marginTop = `${(warp.style.marginTop.split("px")[0] * 1 || 0) - 20}px`;
                        }
                        i++
                    } else {
                        left += 10;
                        zz[i].style.left = `${left}px`
                    }


                    if (!(i >= rowWidthList.length)) return;

                    /* 完成！！！！ */
                    clearInterval(timer)

                    /* loading show！！！ */
                    document.querySelector(".loadingWarp").classList.add("show")

                    await sleep(2000)

                    /* 清空之前的内容 */
                    document.head.innerHTML = ""
                    document.body.innerHTML = ""

                    let dv = document.createElement("div")
                    dv.innerHTML = str
                    dv.querySelectorAll("*").forEach((item) => {
                        switch (item.localName) {
                            case "meta":
                                document.head.appendChild(item)
                                break;
                            case "title":
                                document.head.appendChild(item)
                                break;
                            case "style":
                                document.head.appendChild(item)
                                break;
                            case "script":
                                let ss = document.createElement("script")
                                ss.innerHTML = item.innerHTML;
                                (item.src) && (ss.src = item.src)
                                document.body.appendChild(ss)
                                break;
                            default:
                                document.body.appendChild(item)
                                break;
                        }
                    })
                }, 1)
        }

        /* 纯色字体打字效果 */
        function input(str) {
            let index = 0, h = 0, mt = 0;
            let timer = setInterval(() => {
                warp.innerText += str[index] === " " ? '\u00a0' : str[index]

                /* 输入超过页面高度的70% 向上移动 */
                if (warp.clientHeight > document.documentElement.clientHeight * .7 && warp.clientHeight > h) {
                    mt += 20
                    warp.style.marginTop = - mt + "px"
                    h = warp.clientHeight
                }

                index += 1

                /* 输入完成 */
                if (index >= str.length) {
                    clearInterval(timer);// 清楚定时器

                    /* 清空之前的内容 */
                    document.head.innerHTML = ""
                    document.body.innerHTML = ""

                    let dv = document.createElement("div")
                    dv.innerHTML = str
                    dv.querySelectorAll("*").forEach((item) => {
                        switch (item.localName) {
                            case "meta":
                                document.head.appendChild(item)
                                break;
                            case "title":
                                document.head.appendChild(item)
                                break;
                            case "style":
                                document.head.appendChild(item)
                                break;
                            case "script":
                                let ss = document.createElement("script")
                                ss.innerHTML = item.innerHTML;
                                (item.src) && (ss.src = item.src)
                                document.body.appendChild(ss)
                                break;
                            default:
                                document.body.appendChild(item)
                                break;
                        }
                    })
                }
            }, 3)
        }


        function sleep(time) {
            return new Promise((res, rej) => {
                let timer = setTimeout(() => {
                    res()
                    clearTimeout(timer)
                }, time)
            })
        }
    </script>
</body>

</html>